<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import commonModel from '@/http/modules/common.js'
import { formatTime } from '@/utils/time'
import Utility from '@/utils/utility'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
const SUCCESS_STATUS = ['TRADE_SUCCESS']
const FAIL_STATUS = ['TRADE_FAILED']
const route = useRoute()
const info = ref({})
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const statusLabel = computed(() => {
  if (SUCCESS_STATUS.includes(info.value.withdrawStatus)) {
    return '付款成功'
  } else if (FAIL_STATUS.includes(info.value.withdrawStatus)) {
    return '付款失败'
  } else {
    return '付款处理中'
  }
})
function getInfo() {
  commonModel
    .gatewayApi({
      service: 'cb_withdraw_status_query',
      bizContent: {
        withdrawApplyNo: route.params.id,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        info.value = result
      }
    })
}
onMounted(() => {
  getInfo()
})
</script>

<template>
  <div class="withdraw-page">
    <div class="withdraw fz-14">
      <div class="withdraw-row">
        <label>付款金额</label>
        <span
          >{{ $filters.formatMoney(info.withdrawAmount) }}
          {{ info.withdrawCurrency
          }}{{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.withdrawCurrency
            )
          }}
        </span>
      </div>
      <div class="withdraw-row">
        <label>付款手续费费率</label>
        <span>{{ $filters.formatNumber(info.serviceChargeRate * 100) }} %</span>
      </div>
      <div class="withdraw-row">
        <label>手续费金额</label>
        <span
          >{{ $filters.formatMoney(info.origServiceChargeAmount) }}
          {{ info.serviceChargeCurrency
          }}{{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.serviceChargeCurrency
            )
          }}</span
        >
      </div>
      <div class="withdraw-row">
        <label>手续费优惠金额</label>
        <span
          >{{ info.serviceChargeDiscountAmount }} {{ info.serviceChargeCurrency
          }}{{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.serviceChargeCurrency
            )
          }}</span
        >
      </div>
      <div class="withdraw-row">
        <label>优惠后手续费金额</label>
        <span
          >{{ $filters.formatMoney(info.serviceChargeAmount) }}
          {{ info.serviceChargeCurrency
          }}{{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.serviceChargeCurrency
            )
          }}</span
        >
      </div>
      <div class="withdraw-row">
        <label>汇率</label>
        <span>{{ info.exchangeRate }}</span>
      </div>
      <div class="withdraw-row">
        <label>到账金额</label>
        <span
          >{{ $filters.formatMoney(info.realReceiptAmount) }}
          {{ info.realReceiptCurrency
          }}{{
            Utility.getLabelByValue(
              enumDslInfo.CurrencyType,
              info.realReceiptCurrency
            )
          }}</span
        >
      </div>
      <div class="withdraw-row">
        <label>付款状态</label>
        <span
          :style="{
            color: FAIL_STATUS.includes(info.withdrawStatus)
              ? '#3F84F3'
              : SUCCESS_STATUS.includes(info.withdrawStatus)
              ? ''
              : '#FAA64E',
          }"
          >{{ statusLabel }}</span
        >
      </div>
      <div class="withdraw-row">
        <label>收款人</label>
        <span>{{ info.payeeName }}</span>
      </div>
      <div class="withdraw-row">
        <label>收款银行</label>
        <span>{{ info.bankName }} ({{ info.cardNo }})</span>
      </div>
      <div class="withdraw-row">
        <label>创建时间</label>
        <span>{{ formatTime(info.gmtCreate) }}</span>
      </div>
      <div class="withdraw-row">
        <label>更新时间</label>
        <span>{{ formatTime(info.gmtModify) }}</span>
      </div>
      <div class="withdraw-row">
        <label>订单号</label>
        <span>{{ info.withdrawApplyNo }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.withdraw-page {
  padding: 0.1rem 0.12rem;
}
.withdraw {
  padding: 0.1rem 0.12rem;
  background: #fff;
  border-radius: 0.08rem;
  &-row {
    @include fh;
    justify-content: space-between;
    height: 0.4rem;
    border-top: 1px solid #eee;
    label {
      font-weight: normal;
    }
    span {
      color: #999;
    }
  }
  &-row:nth-of-type(1) {
    border-top: none;
  }
}
</style>
